<script setup>
import categoryAPI from '../api/category_api.js' // 假设分类接口文件，需自行创建
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import lodash from 'lodash'

// 表格数据相关，用于存储分类列表和分页总数
const tableData = ref([])
const total = ref(0)
// 查询参数，控制分页和搜索条件
const searchObj = ref({
  current: 1,
  limit: 10,
  name: '' // 根据分类名搜索
})

// 弹窗相关，控制新增和编辑弹窗的显示与隐藏，以及弹窗中绑定的分类对象
const editWinVisible = ref(false)
const addWinVisible = ref(false)
const obj = ref({})

// 分页查询分类列表方法
const search = async () => {
  try {
    const result = await categoryAPI.page(searchObj.value)
    tableData.value = result.data
    total.value = result.count
  } catch (error) {
    ElMessage.error('查询分类列表失败：' + error.message)
  }
}

// 页面加载时初始化查询分类列表
onMounted(async () => {
  await search()
})

// 分页改变时触发的方法，重新查询
const handleSizeChange = () => {
  search()
}
const handleCurrentChange = () => {
  search()
}

// 点击查询按钮触发的方法，重置页码后重新查询
const handlerSearch = async () => {
  searchObj.value.current = 1
  await search()
}

// 编辑弹窗取消方法，清空编辑对象并关闭弹窗
const editCancel = () => {
  obj.value = {}
  editWinVisible.value = false
}
// 编辑弹窗提交方法，调用接口编辑分类，成功后刷新列表并关闭弹窗
const editCommit = async () => {
  try {
    await categoryAPI.edit(obj.value)
    await search()
    editWinVisible.value = false
    ElMessage.success('编辑分类成功')
  } catch (error) {
    ElMessage.error('编辑分类失败：' + error.message)
  }
}

// 新增弹窗取消方法，清空新增对象并关闭弹窗
const addCancel = () => {
  obj.value = {}
  addWinVisible.value = false
}
// 新增弹窗提交方法，调用接口新增分类，成功后刷新列表并关闭弹窗
const addCommit = async () => {
  try {
    await categoryAPI.add(obj.value)
    await search()
    addWinVisible.value = false
    obj.value = {}
    ElMessage.success('新增分类成功')
  } catch (error) {
    ElMessage.error('新增分类失败：' + error.message)
  }
}

// 点击编辑按钮触发的方法，复制当前行数据到编辑对象，打开编辑弹窗
const handleEdit = async (index, row) => {
  obj.value = lodash.clone(row)
  editWinVisible.value = true
}

// 点击删除按钮触发的方法，弹出确认框，确认后调用接口删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删除该行分类数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async () => {
        try {
          await categoryAPI.del(row.id)
          searchObj.value.current = 1
          await search()
          ElMessage.success('删除分类成功')
        } catch (error) {
          ElMessage.error('删除分类失败：' + error.message)
        }
      })
      .catch(() => {
        // 取消删除，可做些提示或不处理
      })
}
</script>

<template>
  <!-- 搜索表单区域，仅保留分类名搜索 -->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top:10px ">
    <el-form-item label="分类名">
      <el-input v-model="searchObj.name" placeholder="请输入分类名" clearable />
    </el-form-item>
  </el-form>
  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addWinVisible = true">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 分类表格展示区域，仅显示ID、分类名、操作 -->
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column label="ID" prop="id" width="80" />
    <el-table-column label="分类名" prop="name" width="180" />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件，控制页码和每页条数 -->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
  />

  <!-- 编辑分类弹窗，仅显示分类ID、分类名 -->
  <el-dialog v-model="editWinVisible" title="编辑分类" width="500">
    <el-form :model="obj" label-width="100px">
      <el-form-item label="分类ID">
        <el-input v-model="obj.id" disabled placeholder="编辑时ID通常不可改" />
      </el-form-item>
      <el-form-item label="分类名">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增分类弹窗，仅显示分类名 -->
  <el-dialog v-model="addWinVisible" title="新增分类" width="500">
    <el-form :model="obj" label-width="100px">
      <el-form-item label="分类名">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 可根据需要调整表格、弹窗等样式 */
.el-table {
  margin-top: 10px;
}
</style>